﻿<!doctype html>
<html>
<head>
	<title></title>
	<!-- -->
	<link href="../source/button.css" rel="stylesheet" type="text/css" />
	<link href="../source/tab.css" rel="stylesheet" type="text/css" />
	<!-- -->
	<script type="text/javascript">
		enyo = {};
	</script>
	<style>
		.unselectable {
			-webkit-user-select: none;
			-moz-user-select: none;
		}
		.unselectable::selection {
			color: transparent;
		}
	</style>
	<!-- -->
	<script src="../../../enyo/enyo.js" type="text/javascript"></script>
</head>
<body class="theme-fu unselectable">
	<button class="button">Button</button>
	<button class="button" style="font-size: x-large;">Button</button>
	<button class="button" style="font-size: larger">Loooooooooooooong Button</button>
	<hr/>
	<div style="background-color: #D7D7D7">&nbsp;</div>
	<div class="tabbar" style="font-size: larger;">
		<button class="tab">Tabbbitty</button><button class="tab active">Tabbbitty Tabbbitty Too</button><button class="tab">Tabbbitty</button><button class="tab">Tabbbitty Tabbbitty Too</button>
	</div>
	<hr/>
	<div style="background-color: #D7D7D7">&nbsp;</div>
	<div class="tabbar" style="font-size: larger;">
		<span class="tab">Splabboopy</span><span class="tab">Splabboopy</span><span class="tab">Splabboopy</span>
	</div>
	<hr/>
	<div style="background-color: #D7D7D7">&nbsp;</div>
	<script>
		document.write(new enyo.Control({components: [
				{classes: "tabbar", components: [
					{classes: "active tab", content: "Tabitha", onclick: "tabClick"},
					{classes: "tab", content: "Sabitia", onclick: "tabClick"},
					{classes: "tab", content: "Tablature", onclick: "tabClick"},
				]}
			],
			tabClick: function(inSender) {
				enyo.forEach(inSender.container.getClientControls(), function(inC) {
					inC.removeClass("active");
				});
				inSender.addClass("active");
			}
		}).generateHtml());
	</script>
</body>
</html>
